<template>
	<transition name="el-zoom-in-center">
		<div class="JNPF-preview-main">
			<div class="JNPF-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/>
				<div class="options">
					<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
					<el-button @click="goBack">取 消</el-button>
				</div>
			</div>
			<el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
			<el-form ref="elForm" :model="dataForm" size="medium" label-width="130px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<el-row>
					<el-col :span="12">
						<el-form-item label="计划名称" prop="jhmc" required >
							<el-input v-model="dataForm.jhmc" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
								<template slot="prepend"></template>
								<template slot="append"></template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="计划编号" prop="jhbh" required >
							<el-input v-model="dataForm.jhbh" placeholder="请输入" clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
								<template slot="prepend"></template>
								<template slot="append"></template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="维护开始时间" prop="kssj" required >
							<el-date-picker v-model="dataForm.kssj" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="维护结束时间" prop="jssj" required >
							<el-date-picker v-model="dataForm.jssj" placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="组织部门" prop="zzbm" required >
							<el-select v-model="dataForm.zzbm" placeholder="请选择" clearable :style='{"width":"100%"}' >
								<el-option v-for="(item, index) in zzbmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="false" >
						<el-form-item label="添加人" prop="tjr" >
							<el-input v-model="dataForm.tjr" placeholder="系统自动生成" readonly >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="false" >
						<el-form-item label="添加时间" prop="tjsj" >
							<el-input v-model="dataForm.tjsj" placeholder="系统自动生成" readonly >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="状态" prop="zt" required >
							<el-select v-model="dataForm.zt" placeholder="请选择" clearable disabled :style='{"width":"100%"}' >
								<el-option v-for="(item, index) in ztOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col style="height:40px;">
						<el-button type="primary" @click='choice'>
							选择维护设备
						</el-button>
					</el-col>
					<template>
						<el-col>
							<el-table :data="rightsDate" border stripe :height="heightTable">
								<el-table-column v-for="info in rightHeader" :key="info.key" :property="info.key" :label="info.label">
									<template slot-scope="scope">
										{{scope.row[scope.column.property]}}  
									</template>
								</el-table-column>
								<el-table-column v-for="info in rightHeader1" :key="info.key" :property="info.key" :label="info.label">
									<template slot-scope="scope">
										<el-select v-model="scope.row.wxr" placeholder="请选择" clearable :style='{"width":"100%"}' filterable>
											<el-option v-for="(item, index) in wxrOptions" :key="index" :label="item.F_RealName" :value="item.F_Id" ></el-option>
										</el-select>
									</template>
								</el-table-column>
							</el-table>
						</el-col>
					</template>
				</el-row>
				<el-row style="margin-top:10px;">
					<el-col :span="24">
						<el-form-item label="组织与职责分工" prop="zzfg" required >
							<el-input v-model="dataForm.zzfg" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":1000}' >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="作业方案" prop="zyfa" required >
							<el-input v-model="dataForm.zyfa" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":1000}' >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="质量要求" prop="zlyq" required >
							<el-input v-model="dataForm.zlyq" placeholder="请输入" show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":1000}' >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="附件" prop="fj" >
							<JNPF-UploadFz v-model="fjList" accept="" :fileSize="20" sizeUnit="MB" :limit="1" buttonText="点击上传" >
							</JNPF-UploadFz>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			</el-row>
			<GoodsBox v-if="goodsBoxVisible" ref="goodsBox" @refreshDataList="initList" />
		</div>
	</transition>

</template>
<script>
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
import GoodsBox from './WxsbBox'
  export default {
	components: { GoodsBox },
    data() {
		var kssjTime = (rule, value, callback) => {
			if (!this.dataForm.jssj) {
				callback()
			} else {
				if (Number(this.dataForm.jssj) <= Number(value)) {
					callback(new Error('维护开始时间应该小于维护结束时间'));
				} else {
					callback()
				}
			}
		}
		var jssjTime = (rule, value, callback) => {
			if (!this.dataForm.kssj) {
				callback()
			} else {
				if (Number(this.dataForm.kssj) >= Number(value)) {
					callback(new Error('维护结束时间应该大于维护开始时间'));
				} else {
					callback()
				}
			}
		}
      return {
		  goodsBoxVisible: false,  //-
		  heightTable:'90px',
        visible: false,
        isDetail: false,
        dataForm: {
					jhmc:undefined,
					jhbh:undefined,
					kssj:undefined,
					jssj:undefined,
					zzbm:undefined,
					zt:"0",
					zzfg:undefined,
					zyfa:undefined,
					zlyq:undefined,
					fj:[],

        },
        rules: {
						jhmc:[
						{
							required:true,
							message:'请输入计划名称',
							trigger:'blur'
						},
						],
						jhbh:[
						{
							required:true,
							message:'请输入计划编号',
							trigger:'blur'
						},
						],
						kssj:[
						{
							required:true,
							message:'请输入维护开始时间',
							trigger:'blur'
						},
						{ validator: kssjTime, trigger: 'change' }
						],
						jssj:[
						{
							required:true,
							message:'请输入维护结束时间',
							trigger:'blur'
						},
						{ validator: jssjTime, trigger: 'change' }
						],
						zzbm:[
						{
							required:true,
							message:'请输入组织部门',
							trigger:'blur'
						},
						],
						zt:[
						{
							required:true,
							message:'请输入状态',
							trigger:'blur'
						},
						],
						zzfg:[
						{
							required:true,
							message:'请输入组织与职责分工',
							trigger:'blur'
						},
						],
						zyfa:[
						{
							required:true,
							message:'请输入作业方案',
							trigger:'blur'
						},
						],
						zlyq:[
						{
							required:true,
							message:'请输入质量要求',
							trigger:'blur'
						},
						],
        },
				zzbmOptions:[],
				ztOptions:[{"fullName":"未发布","id":"0"},{"fullName":"进行中","id":"1"},{"fullName":"已结束","id":"2"}],

					fjList:[],

			rightHeader: [{label: '设备名称',key: 'sbmc'},{label: '设备状态',key: 'sbzt'},{label: '设备类型',key: 'sblx'},{label: '等级部门',key: 'djbm'}],
			rightHeader1: [{label: '维护人',key: 'wxr'}],
			rightsDate:[],

			wxrOptions:[],
			wxr:[],

      }
    },
    created() {
		this.getzzbmOptions();
		this.getwxrOptions();
    },
    methods: {
		getwxrOptions()
		{
			previewDataInterface('8bca424f16d6448ab09e57a028853aa9').then(res => {
				this.wxrOptions = res.data
			})
		},
		getzzbmOptions()
		{
			previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
				this.zzbmOptions = res.data
			})
		},

           goBack() {
                    this.$emit('refresh')
                },
      init(id, isDetail) {

        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
          this.$refs['elForm'].resetFields();
          if (this.dataForm.id) {
            request({
              url: '/api/System/sbwhjh/' + this.dataForm.id,
              method: 'get'
            }).then(res =>{
              this.dataForm = res.data;
				this.fjList = this.dataForm.fj ? JSON.parse(this.dataForm.fj) : [];
				this.rightsDate = JSON.parse(res.data.listname);
				this.heightTable = (this.rightsDate.length*50+40)+'px'
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
				this.$set(this.dataForm, 'fj', JSON.stringify(this.fjList));
		let WXR1 = [];
		let WXDX1 = [];
		let listArr = this.rightsDate;
		if(listArr.length > 0){
			for(let i=0;i<listArr.length;i++){
				WXR1.push(listArr[i].wxr);
				WXDX1.push(listArr[i].id);
			}
		}
		let ListName1 = JSON.stringify(this.rightsDate);
		let query = {
			...this.dataForm,
			listname: ListName1,
			wxr: WXR1.join(','),
			wxdx: WXDX1.join(',')
		}
        this.$refs['elForm'].validate((valid) => {
			// console.log(query);
          if (valid) {
            if (!this.dataForm.id) {
              request({
                url: '/api/System/sbwhjh',
                method: 'post',
                data: query,
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            } else {
              request({
                url: '/api/System/sbwhjh/' + this.dataForm.id,
                method: 'PUT',
                data: query
              }).then((res) =>{
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1000,
                  onClose: () =>{
                    this.visible = false;
                    this.$emit('refresh', true);
                  }
                })
              })
            }
          }
        })
      },

	  //---
        choice() {
          this.goodsBoxVisible = true
          this.$nextTick(() => {
            this.$refs.goodsBox.init()
          })
        },
        initList(list) {
          this.rightsDate = [];
          for (let i = 0; i < list.length; i++) {
            const e = list[i];
            let item = {
                "id": e.id,
                "sbmc": e.sbmc,
                "sbzt": e.sbzt,
                "sblx": e.sblx,
                "djbm": e.djbm
            }
            this.rightsDate.push(item)
            this.heightTable = (list.length*50+40)+'px'
          }
        },

    }
  }
</script>